<template>
  <a-modal
    :visible="visible"
    title="用户出勤标签"
    :width="600"
    :confirmLoading="loading"
    class="education-dailog-login noNav"
    @cancel="
      () => {
        $emit('cancel')
      }
    "
    @ok="() => { $emit('ok') }"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" :labelCol="{ sm: { span: 4 } }" :wrapperCol="{ sm: { span: 20 } }">
        <a-form-item v-show="model && model.id > 0" label="ID">
          <a-input v-decorator="['id', { initialValue: 0 }]" disabled />
        </a-form-item>
        <a-form-item label="日期">
          <a-input disabled v-decorator="['day']" />
        </a-form-item>
        <a-form-item label="类型">
          <a-select
            v-decorator="['type', { rules: [{ required: true, message: '类型不能为空' }] }]"
            :options="option"
          />
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea v-decorator="['content']" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import pick from 'lodash.pick'
const fields = ['id', 'type', 'content']//, 

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    day: {
        type: Object,
        default: () => {return {}},
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  created() {
    
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v))
  },
  data() {
    return {
      form: this.$form.createForm(this),
      type: 1,
      src: '',
      option: [
        { label: '设置为出勤日', value: 1 },
        { label: '设置为休息日', value: 2 },
        { label: '设置为正常考勤', value: 3 },
      ],
    }
  },
  methods: {
    handleClose() {
      this.$emit('close', false)
    },
  },
  watch: {
    visible: function (n) {
        if(n){
            setTimeout(()=>{
                this.form.setFieldsValue({day: this.day.format('YYYY-MM-DD')})
            })
        }
    },
    model: function() {
        console.log(this.model,'model')
        this.model && this.form.setFieldsValue(pick(this.model, fields))
    }
  },
}
</script>
<style lang="less" scoped>
</style>

